import React, {Component} from "react";
import {Link} from "react-router-dom";
import {Layout, Breadcrumb} from "antd";
import {Helmet} from "react-helmet";
import PropTypes from 'prop-types';
import "./Style/index.css";
import "./Style/layout.scss";
import SideBar from "./Sider";
class ContentPage extends Component{
    state={
        breadcrumb: []
    };

    constructor(props){
        super(props)
        console.log(props)
    }

    handleMenuSelectionChange = (stack = []) => {
        this.setState({
            breadcrumb: stack
        })
    };
    buildBreadCrumb = () => {
        let {breadcrumb} = this.props;
        if (!breadcrumb) {
            breadcrumb = this.state.breadcrumb;
        }

        if (!breadcrumb) {
            return null;
        }

        breadcrumb = [...breadcrumb];

        if (this.props.extraBreadcrumb) {
            const extraBreadcrumb = this.props.extraBreadcrumb instanceof Array ? this.props.extraBreadcrumb : [this.props.extraBreadcrumb];

            console.log(extraBreadcrumb)
            extraBreadcrumb.forEach((x, i) => {
                if (x instanceof Object && x.title) {
                    breadcrumb.push({key: `menu._extra.${i}`, title: x.title, path: x.path});
                }
            })
        }
        console.log(breadcrumb)
        if (this.props.pageTitle) {
            breadcrumb = [...breadcrumb, {key: 'menu._current', title: this.props.pageTitle}];
        }
        console.log(breadcrumb)
        return breadcrumb && breadcrumb.map((item) => {

            return (
                <Breadcrumb.Item key={item.key}>
                    {
                        item.path
                            ? <Link to={item.path}><b>{item.title}</b></Link>
                            : <b>{item.title}</b>
                    }
                </Breadcrumb.Item>
            )
        });
    };

    render(){
        return(
            <Layout className={'layout'}>
                <Helmet>
                    <title>{this.props.pageTitle || "WMI管理和VIN码备案"}</title>
                </Helmet>
                <Layout.Header>Header</Layout.Header>
                <Layout>
                    <SideBar onMenuSelectionChange={this.handleMenuSelectionChange}/>
                    <Layout>
                        <Layout.Content>
                            <Breadcrumb separator={'>'}>
                                {this.buildBreadCrumb()}
                            </Breadcrumb>
                            {this.props.children}
                        </Layout.Content>
                        <Layout.Footer>Footer</Layout.Footer>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
};

ContentPage.propTypes = {
    pageTitle: PropTypes.string,
    extraBreadcrumb: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.arrayOf(PropTypes.object),
    ]),
};

export default ContentPage;